import React from 'react'
import { connect } from 'react-redux'
import { NavBar } from 'antd-mobile'
import { Switch, Route, Redirect } from 'react-router-dom'
import NavList from '../navlink/index'
import Genius from '../genius/index'
import Boss from '../boss/boss'
import MsgList from '../Msglist/index'
import UserCenter from '../usercenter/index'

class Dashboard extends React.Component{

  render() {
    const type = this.props.type
    const { pathname } = this.props.location
    const navList = [
      {
        path: '/boss',
        text: '牛人',
        icon: 'genius',
        title: '牛人列表',
        component: Genius,
        hide: type === 'genius'
      },
      {
        path: '/genius',
        text: 'BOSS',
        icon: 'boss',
        title: 'BOSS列表',
        component: Boss,
        hide: type === 'boss'
      },
      {
        path: '/msg',
        text: '消息',
        icon: 'msg',
        component: MsgList,
        title: '消息列表'
      },
      {
        path: '/me',
        text: '我',
        icon: 'user-center',
        component: UserCenter,
        title: '个人中心'
      }
    ]
    const nowTitle = navList.find(item => item.path === pathname )
    return <div>
      <NavBar className='fixd-header' mode="dard"> { nowTitle ? nowTitle.title : null } </NavBar>
      <NavList data={ navList } />
      <div style={{ marginTop: '45px', marginBottom: '50px' }}>
        <Switch>
          {navList.map(v => 
            <Route key={v.path} path={v.path} component={v.component} />      
          )}
          {/* 有登录状态，没有匹配到路由，调到列表页 */}
          { type ? <Redirect to={`/${type}`} /> : null }
        </Switch>
      </div>
    </div>
  }
} 

export default connect(state => state.user, {})(Dashboard)